<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/navbar.css">
    <title>东方启音</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .all{
            width: 100vw;
            overflow-x: hidden;
        }
        .swiper-wrapper img{
            width: 100%;
            height: 220px;
        }
        .swiper {
            width: 100%;
            height: 220px;
            overflow: hidden;
        }
        .box{
            width: 100%;
            height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            border-bottom: 1px solid #eee;
        }
        .box li a{
            color: #666;
            width: 88px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .icon-shouye-jianjie,.icon-Icon-zhuanjiatuanduiguanli,.icon-24gf-folderMinus,.icon-xinxi1{
            font-size: 22px;
        }
        .box li a span:nth-of-type(2){
            font-size: 14px;
            margin-top: 10px;
        }
        .language-service,.course{
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #666;
            padding-left: 24px;
            margin-top: 10px;
            /*background-color: #e3e4e5;*/
        }
        .icon-quan{
            font-size: 13px;
            color: #99CC00;
        }
        .box2 ul{
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            border-bottom: 1px solid #eee;
        }
        .box2 ul li{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .icon-glassesyanjing,.icon-icon-shiyanxitong,.icon-yiyaoxiang{
            font-size: 26px;
        }
        .box2 ul li span:nth-of-type(even){
            font-size: 14px;
            color: #666;
        }
        .b{
            color: #fff;
            display: inline-block;
            width: 48px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            border-radius: 50%;
        }
        .box3 ul{
            width: 100%;
            margin-top: 10px;
            height: 120px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            /*overflow: scroll;*/
        }
        .box3 ul li{
            width: 25%;
            height: 110px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-right: 0.1px solid #fff;
        }
        .box3 ul li:nth-of-type(odd){
            background: url("img/course-ab.786ed16.png") 50% no-repeat;
        }
        .box3 ul li:nth-of-type(even){
            background: url("img/course-star.324ce5b.png") 50% no-repeat;
        }
        .box3 ul li span:nth-of-type(even){
            font-size: 14px;
            margin-top: 10px;
            color: #99CC00;
        }
        .icon-wujiaoxing,.icon-shu{
            font-size: 20px;
            color: #99CC00;
        }
        .box4{
            position: relative;
        }
        .new_lang{
            width: 100%;
            /*background-color: #409eff;*/
            display: flex;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #666;
            padding-left: 24px;
            margin: 10px 0px;
        }
        .box4 .science{
            margin-left: 50px;
        }
        .box4 .switch{
            width: 100%;
            height: 120px;
            background-color: papayawhip;
            /*margin-bottom: 30px;*/
        }
        .box4 .switch2{
            width: 100%;
            height: 120px;
            background-color: #999;
            margin-bottom: 30px;
            position: absolute;
            left: 0;
            top: 50px;
            display: none;
        }
        .lianjie{
            margin-bottom: 52px;
            width: 100%;
            height: 34px;
            line-height: 28px;
            text-align: center;
            background-color: #eee;
        }
        .lianjie a{
            color: #3399FF;
            font-size: 14px;
        }
    </style>
</head>
<body>
<script src="./js/header.js"></script>
<div class="all">
    <div class="swiper">
        <div class="swiper-wrapper"></div>
    </div>
    <ul class="box">
        <li>
            <a href="#">
                <span class="iconfont icon-shouye-jianjie"></span>
                <span>简介</span>
            </a>
        </li>
        <li>
            <a href="expert.html">
                <span class="iconfont icon-Icon-zhuanjiatuanduiguanli"></span>
                <span>专家</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="iconfont icon-24gf-folderMinus"></span>
                <span>案例</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="iconfont icon-xinxi1"></span>
                <span>联系</span>
            </a>
        </li>
    </ul>
    <div class="box2">
        <div class="language-service">
            <span class="iconfont icon-quan"></span>
            <span>言语康复服务群体</span>
        </div>
        <ul></ul>
    </div>
    <div class="box3">
        <div class="course">
            <span class="iconfont icon-quan"></span>
            <span>课程</span>
        </div>
        <ul></ul>
    </div>
    <div class="box4">
        <div class="new_lang">
            <div onclick="newShow()" class="news">
                <span class="iconfont icon-quan"></span>
                <span>新闻</span>
            </div>
            <div onclick="kepu()" class="science">
                <span class="iconfont icon-quan"></span>
                <span>言语科普</span>
            </div>
        </div>
        <div class="switch">新闻</div>
        <div class="switch2">言语科普</div>
    </div>
    <div class="lianjie">
        <a href="#">粤ICP备11022524号-9</a>
    </div>
</div>
<script src="./js/navbar.js"></script>
</body>
<script src="./js/swiper-bundle.min.js"></script>
<script>
    // 创建请求对象
    var xhr = new XMLHttpRequest()
    console.log(xhr)
    // api 接口
    xhr.open('GET','http://47.116.75.38:8101/front/carousel')
    // 发送请求参数 没有则写null
    xhr.send(null)

    var sw = document.querySelector('.swiper-wrapper')
    // 请求成功之后执行
    xhr.onload = function (){
        var data = JSON.parse(xhr.response).data.records
        // console.log(data)
        data.forEach(function (item){
            var div = document.createElement('div')
            div.className = 'swiper-slide'
            var img = document.createElement('img')
            img.src = item.image
            // console.log(item)
            div.appendChild(img)
            sw.appendChild(div)
        })
    }

    var mySwiper = new Swiper ('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        // effect: 'cube',
        autoplay: true,
    })

    function showMenu(){
        document.querySelector('.menu').classList.toggle('show')
    }

    // 言语康复服务群体开始
    var xhr1 = new XMLHttpRequest()
    xhr1.open('GET','http://47.116.75.38:8101/front/getService')
    xhr1.send(null)
    var arr = [
        'icon-glassesyanjing',
        'icon-yiyaoxiang',
        'icon-icon-shiyanxitong',
    ]
    var brr = [
        '#99CC00',
        '#FF9900',
        '#3399FF'
    ]
    var ul = document.querySelector('.box2 ul')
    xhr1.onload = function (){
        var data1 = JSON.parse(xhr1.response).data
        data1.forEach(function (item,index){
            // console.log(item)
            var li = document.createElement('li')
            var sp = document.createElement('span')
            var sp1 = document.createElement('span')
            sp.className = 'iconfont ' + arr[index]
            sp.classList.add('b')
            sp.style.backgroundColor = brr[index]
            // sp.setAttribute('background-color','brr[index]')
            sp1.innerText = item.dictName
            li.appendChild(sp)
            li.appendChild(sp1)
            ul.appendChild(li)
        })
    }
    // 言语康复服务群体结束

    // 课程开始
    var xhr2 = new XMLHttpRequest()
    xhr2.open('GET','http://47.116.75.38:8101/front/getCourseCls')
    xhr2.send(null)
    var crr = [
        'icon-shu',
        'icon-wujiaoxing',
        'icon-shu',
        'icon-wujiaoxing'
    ]
    var ul2 = document.querySelector('.box3 ul')
    xhr2.onload = function (){
        var data2 = JSON.parse(xhr2.response).data
        data2.forEach(function (item,index){
            var li2 = document.createElement('li')
            var sp2 = document.createElement('span')
            var sp22 = document.createElement('span')
            sp2.className = 'iconfont ' + crr[index]
            sp22.innerText = item.dictLabel
            li2.appendChild(sp2)
            li2.appendChild(sp22)
            ul2.appendChild(li2)
        })
    }
    // 课程结束
    function newShow(){
        document.querySelector('.switch2').style.display = 'none'
        document.querySelector('.switch').style.display = 'block'
        console.log('点击了')

    }
    function kepu(){
        document.querySelector('.switch2').style.display = 'block'
    }

</script>
</html>